<template>
	<div class="LayOut flex-row-c-c">
		<div class="echartItem" ref="echartItem"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				option: null,
				myChart: null
			}
		},
		methods: {

		},
		created() {
			this.option = {
				title: {},
				legend: [
					{
						icon: 'rect',
						itemWidth: 10,
						itemHeight: 6,
						data:[
							{ name: '销量', itemStyle: {color: 'red'}},
							{ name: '评分', itemStyle: {color: 'green'}}
						]

					},
				],
				tooltip: {
					trigger: 'axis',
					formatter: (params) => {
						let name = '';
						let strShow = '';
						params.forEach(value => {
							if (!name) {
								name = value.name;
								strShow += name + '<br/>';
							}
							strShow += value.marker + value.seriesName + ': ' + value.value + '<br/>';
						});
						return strShow;
					}
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: {},
				series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							// 保持原有渐变配置
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 1,
										color: 'RGBA(192, 210, 155, 0)'
									},
									{
										offset: 0,
										color: 'RGBA(192, 210, 155, 0.5)'
									}
								],
								global: false
							}
						}
					},
					{
						name: '评分',
						type: 'bar',
						data: [7, 6, 8, 5, 9, 7],
						itemStyle: {
							// 保持原有渐变配置
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 1,
										color: 'rgba(133, 238, 243, 0)'
									},
									{
										offset: 0,
										color: 'rgba(133, 238, 243, 0.5)'
									}
								],
								global: false
							}
						}
					}
				]
			};
		},
		mounted() {
			// console.log(this.$refs.echartItem)
			this.myChart = echarts.init(this.$refs.echartItem, 'dark')
			this.myChart.setOption(this.option)

		},
		beforeDestroy() {
			// console.log('销毁前');
			this.myChart.dispose()
			// console.log('已销毁');
		}
	}
</script>

<style lang="scss" scoped>
	.LayOut {
		width: 100%;
		min-height: 100vh;
		background-color: aqua;

		.echartItem {
			width: 300px;
			height: 300px;
			border: 1px solid black;
		}
	}
</style>